<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="选择日期" prop="date">
        <el-date-picker v-model="dateTime" :disabled="disabled" type="month" placeholder="请选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仓库名称" prop="warehouseName">
        <el-select v-model="queryParams.wareHouseCode" filterable placeholder="请输入仓库名称" clearable>
          <el-option v-for="item in WareList" :key="item.wareCode" :label="item.wareName" :value="item.wareCode">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:WarehouseSummaryReport:Export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <div class="textNuM" v-if="this.Summoney > 0">开票总金额：<span class="kpNum"> {{ formatNumber(this.Summoney) }}</span>
      </div>
    </el-row>

    <el-table v-loading="loading" :data="WarehouseDetailList" border class="table">
      <el-table-column prop="index" label="序号" width="55" align="center"></el-table-column>
      <el-table-column label="仓库编码" align="left" prop="warehouse_code">
        <template slot-scope="scope">
          <span :class="scope.row.warehouse_code.length <= 6 ? 'ckText1' : 'ckText'"> {{ scope.row.warehouse_code
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="仓库名称" align="center" prop="warehouse_name">
        <template slot-scope="scope">
          <span :class="scope.row.warehouse_code.length <= 6 ? 'ckName' : ''">{{ scope.row.warehouse_name
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="压库出库金额" align="center" prop="outMoney">
        <template slot-scope="scope">
          <span class="textNum"> {{ formatNumber(parseFloat(scope.row.outMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="买断入库金额" align="center" prop="inMoney">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合计消耗金额" align="center" prop="totalMoney">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.totalMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开票金额" align="center" prop="recordsMoney">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.recordsMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="抵扣金额" align="center" prop="saleMoney">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.saleMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="差异金额" align="center" prop="diffMoney">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.diffMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="pushProduct(scope.row)">产品详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>

  </div>
</template>

<script>
import { listProvideWareRecords1 } from "@/api/system/WarehouseDetail";
import { wareList } from "@/api/system/PartsWarehouse";
export default {
  name: "WarehouseDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商付款表格数据
      WarehouseDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wareHouseCode: "",
        provide: "",
        createTime: ""
      },
      // 表单参数
      form: {},
      dateTime: [],
      WareList: [],
      Summoney: "",
      disabled: false,
      deptName: "",
    };
  },
  created() {
    this.eventHnadling();
  },
  methods: {
    eventHnadling() {
      const User = localStorage.getItem('User');
    this.deptName = JSON.parse(User).dept ? JSON.parse(User).dept.deptName : '';
    if (this.deptName !== '物资公司') {
      this.queryParams.provide = this.deptName;
    } else {
      this.queryParams.provide = "";
    }
    this.FormData();
    this.getList();
    this.wareList();
    },
    /** 查询供应商付款列表 */
    getList() {
      this.loading = true;
      // 将日期字符串转换为日期对象
      const dateObj = new Date(this.dateTime);

      // 获取年份和月份
      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1;

      // 格式化月份为两位数
      const formattedMonth = month < 10 ? `0${month}` : `${month}`;

      // 格式化日期
      const formattedStartDate = `${year}-${formattedMonth}`;

         this.queryParams.createTime = this.dateTime ? formattedStartDate:'';
      listProvideWareRecords1(this.queryParams.wareHouseCode, this.queryParams.createTime, this.queryParams.provide).then(response => {
        let Summoney = localStorage.getItem('summoney');
        this.Summoney = Summoney ? parseFloat(Summoney).toFixed(2) : 0;
        this.WarehouseDetailList = response.data.sort((a, b) => {
          const codeA = a.warehouse_code.substring(0, 5);
          const codeB = b.warehouse_code.substring(0, 5);
          if (codeA < codeB) {
            return -1;
          }
          if (codeA > codeB) {
            return 1;
          }
          return 0;
        });
        this.WarehouseDetailList.forEach((item, index) => {
          item.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
        })
        this.total = response.data.length;
        this.loading = false;
      });
    },
    // pushProduct(row) {
    //   this.$router.push({
    //     name: 'PartsWarehouse', query: {
    //       warehouseCode: row.warehouse_code, provide: this.queryParams.provide, dateTime: this.queryParams.createTime
    //     }
    //   });
    // },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createTime: null,
        provide: null,
        financeCode: null,
        taxRed: null,
        platformMoney: null,
        payableMoney: null,
        unpaidMoney: null,
        valuationTax: null,
        status: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.wareHouseCode = "";
      this.FormData();
      this.handleQuery();
    },
    // 仓库下拉
    wareList() {
      wareList().then(rst => {
        this.WareList = rst.data.sort((a, b) => {
          const codeA = a.wareCode.substring(0, 5);
          const codeB = b.wareCode.substring(0, 5);
          if (codeA < codeB) {
            return -1;
          }
          if (codeA > codeB) {
            return 1;
          }
          return 0;
        });
      })
    },


    /** 导出按钮操作 */
    handleExport() {
      this.download('system/provideRecords/exportProvideWare', {
        ...this.queryParams
      }, `仓库明细${this.queryParams.createTime}.xlsx`)
    },
    FormData() {
      // 定义一个函数,用于格式化日期为"yyyy-MM"
      const formatDate = date => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        return `${year}-${month}`;
      };

      // 获取当前日期
      const currentDate = new Date();
      const lastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1);

      // 设置dateTime的初始值为当前年月,并格式化为"yyyy-MM"
      this.dateTime =  formatDate(lastMonth);
    },
    //数字转换
    formatNumber(value) {
      if (value) {
        let [integerPart, decimalPart] = value.toString().split('.');
        let formattedNumber = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.' + decimalPart.slice(0, 3);
        return formattedNumber;
      }

    }
  }
};
</script>
<style lang="scss" scoped>
.textNum {
  float: right;
}

.table {
  .el-table__body-wrapper {
    height: 700px !important;
    overflow-y: auto !important;
  }
}

.ckText {
  float: left;

}

.ckText1 {
  float: left;
  font-weight: 600;
}

.ckName {
  font-weight: 600;
}

.textNuM {
  float: right;
  margin-right: 15px;
  font-size: 15px;
  margin-top: 3px;
  color: #c0c4cc;

  .kpNum {
    font-weight: 600;
    color: red;
  }
}
</style>
